<template>
  <div class="jyzt">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="margin-top: 20px">
        <el-card>
          <div class="center-title">
            <div class="title">{{ title }}</div>
            <div class="center">
              <el-button :type="queryParams.flag == '0' ? 'primary' : ''" @click="handleClick('0')">进行中</el-button>
              <el-button :type="queryParams.flag == '1' ? 'primary' : ''" @click="handleClick('1')">已完成</el-button>
            </div>
            <el-select
              v-model="queryParams.nf"
              class="customSelct"
              popper-class="countyprop"
              :popper-append-to-body="true"
              clearable
              @change="onNdChange"
            >
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="content">
            <div v-for="(el, index) in tableData" :key="index" class="tableItem">
              <div class="item">
                <div class="label">主题</div>
                <div class="value">{{ el.title }}</div>
              </div>
              <div class="item second">
                <div class="label">内容</div>
                <div class="value">{{ el.content }}</div>
              </div>
              <div class="item">
                <div class="label">发布时间</div>
                <div class="value">{{ el.fbsj }}</div>
              </div>
              <div class="button">
                <el-button @click="handleDetail(el)" type="warning">{{ el.tprs }}人投票</el-button>
              </div>
            </div>
          </div>
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :total="queryParams.total"
            background
            class="pagination"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </el-col>
    </el-row>
    <el-dialog v-model="dialog.visible" class="customDialog" :title="dialog.title" width="500px">
      <el-form ref="demoFormRef" class="queryForm" :model="form" label-width="100px">
        <el-form-item label="主体内容" prop="content">
          <el-input v-model="form.content" type="textarea" />
        </el-form-item>
        <el-form-item label="发布时间" prop="fbsj">
          <el-input v-model="form.fbsj" />
        </el-form-item>
        <el-form-item label="投票开始时间" prop="startTime">
          <el-input v-model="form.startTime" />
        </el-form-item>
        <el-form-item label="投票结束时间" prop="endTime">
          <el-input v-model="form.endTime" />
        </el-form-item>
        <el-form-item label="附件材料" prop="fj">
          <imageUpload v-model="form.fj" :isShowTip="false" />
        </el-form-item>
        <el-form-item label="投票结果" prop="xxList">
          <div>
            <div style="color: #fff">支持</div>
            <div style="display: flex">
              <el-progress :percentage="percentage(form.xxList, '支持')" :text-inside="true" :stroke-width="24"></el-progress>
              <el-button style="color: #fff" text>{{ form.xxList[0].xzrs }}人投票</el-button>
            </div>
            <div style="color: #fff">不支持</div>
            <div style="display: flex">
              <el-progress :color="'#f56c6c'" :text-inside="true" :percentage="percentage(form.xxList, '不支持')" :stroke-width="24"></el-progress>
              <el-button style="color: #fff" text>{{ form.xxList[1].xzrs }}人投票</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import useMapStore from '@/store/modules/map';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
const props = defineProps({
  path: {
    type: String,
    default: ''
  }
});
const demoFormRef = ref<ElFormInstance>();
const reset = () => {
  form.value = { ...initFormData };
  demoFormRef.value?.resetFields();
};
const options = ref([]);
const title = ref('投票征集');
const dialog = reactive<DialogOption>({
  visible: false,
  title: '村产业发展'
});
const total = ref(3);
const initFormData = {
  id: undefined,
  content: undefined,
  fbsj: undefined,
  startTime: undefined,
  endTime: undefined,
  fj: undefined,
  xxList: undefined
};
const format = (percentage) => (percentage === total.value ? 'Full' : `${percentage}`);
const data = reactive({
  form: { ...initFormData }
});
const onNdChange = (value) => {
  if (value) {
    queryParams.value.nf = value;
  } else {
    queryParams.value.nf = '';
  }
  init(true);
};
const { form } = toRefs(data);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  nf: '',
  flag: ''
});

const percentage = (data, flag) => {
  if (data) {
    const arr = data.filter((el) => el.xxnr == flag);
    const per = (Number(arr[0].xzrs) / total.value).toFixed(2);
    return Number(per) * 100;
  }
  return 0;
};
const tableData = ref([]);
const handleDetail = async (el) => {
  reset();
  const _id = el?.id;
  const res = await $szxcapi.yjzjInfoQuery({ id: _id });

  total.value = Number(res.data.xxList[0].xzrs) + Number(res.data.xxList[1].xzrs);
  Object.assign(form.value, res.data);
  dialog.visible = true;
};
const handleClick = (value) => {
  if (queryParams.value.flag == value) {
    queryParams.value.flag = '';
  } else {
    queryParams.value.flag = value;
  }
  init(true);
};
const handleCurrentChange = (e) => {
  queryParams.value.pageNum = e;
  init(false);
};
const init = async (flag) => {
  if (flag) {
    queryParams.value.pageNum = 1;
  }
  const params = {
    'ssc': useMapStore().szxcCountryText,
    ...queryParams.value
  };
  const data = await $szxcapi.yjzjQuery(params);
  tableData.value = data.rows;
  queryParams.value.total = data.total;
};
onMounted(async () => {
  await nextTick();
  const currentYear = new Date().getFullYear();
  for (let i = 0; i < 6; i++) {
    options.value.push({
      label: `${currentYear - i}年`,
      value: currentYear - i
    });
  }
  init(true);
});
</script>

<style lang="scss" scoped>
.jyzt {
  width: 100%;
  height: 100%;
  font-family: 'DingTalk';
  color: white;
  .el-card {
    max-height: calc(90vh - 200px) !important;
    background: #178af01a;
    border: none;
    overflow: hidden auto;
    .el-pagination {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
    .center-title {
      font-weight: 700;
      font-size: 20px;
      color: white;
      margin-bottom: 14px;
      display: flex;
      width: 100%;
      .title {
        width: 200px;
      }
      .center {
        width: 250px;
        background: #178af01a;
      }
      .el-select {
        width: 200px;
      }
    }
    .button {
      display: flex;
      justify-content: center;
      margin-top: 14px;
    }
  }
  .el-progress {
    // width: 250px;
    :deep(.el-progress-bar) {
      width: 200px;
    }
    :deep(.el-progress__text) {
      width: 100px;
    }
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .tableItem {
    width: 30%;
    padding: 10px 20px;
    margin-bottom: 10px;
    color: white;
    border: 1px solid rgba(30, 139, 235, 0.4);
    .item {
      display: flex;
      .label {
        width: 80px;
        flex-shrink: 0;
        font-size: 16px;
      }
      &.second {
        .value {
          height: 100%;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
